
<template>
  <el-tabs
    v-model="gymProductId"
    @tab-click="handleClick"
    style="padding: 15px"
  >
    <el-tab-pane
      v-for="(item, index) in gymlist"
      :key="index"
      :label="item.name"
      :name="item.id"
    >
    </el-tab-pane>
    <Badminton
      v-if="regionId"
      :regionId="regionId"
      ref="childrenDom"
      :gymProductId="gymProductId"
      :gymProductName="gymProductName"
    />
    <!-- <el-tab-pane label="篮球" name="second">篮球</el-tab-pane>
    <el-tab-pane label="乒乓球" name="third">乒乓球</el-tab-pane> -->
  </el-tabs>
</template>
<script>
import Badminton from "./badminton.vue";
import { itemPageList, regionPageList } from "@/config/api";
export default {
  components: {
    Badminton
  },
  data () {
    return {
      gymProductId: "",
      gymProductName: "",
      //项目列表
      gymlist: [],
      //场区列表
      regionId: 0
    };
  },
  methods: {
    regionPageList (gymProductId) {
      regionPageList({
        gymProductId: gymProductId,
        pages: "1",
        pageSize: "100"
      }).then(res => {
        if (res.data.status == 200) {
          this.regionId = res.data.result.list[0].id;
          console.log(res,"res")
          
        }
      });
    },
    //获取列表
    getData () {
      itemPageList({ pages: "1", pageSize: "100" }).then(res => {
        if (res.data.status == 200) {
          res.data.result.list.map(item => {
            item.id = item.id.toString();
          });
          this.gymlist = res.data.result.list;
          this.gymProductId = res.data.result.list[0].id;
          this.gymProductName = res.data.result.list[0].name;
          this.regionPageList(res.data.result.list[0].id);
        }
        console.log(this.gymProductId, "3221321");
      });
    },
    handleClick (tab, event) {
      this.gymProductId = tab.name;
      this.gymProductName = tab.label;
      this.regionPageList(tab.name);
      console.log(tab, "tab");
      console.log(this.gymProductId, "222");
      console.log(this.$refs.childrenDom);
      // (this.$refs.childrenDom.form.date = ""),
      // this.$refs.childrenDom.form.regionId = "";
      console.log(this.regionId)
      
    }
  },
  created () {
    this.getData();
  }
};
</script>
